<template>
  <div>
    <div class="feed-head" @click="handleruser(data.content.user.userId,data.content.user.userName)">
      <img
        class="user-avatar"
        src="../../assets/defaultAvatar.34b4451.png"
        alt=""
        style="width: 36px; height: 36px; border-radius: 50%"
      />
      <p class="head-info">{{ data.content.user.userName }}</p>
      <p class="level">Lv{{ data.content.user.level }}</p>
    </div>
    <div class="feed-content">
      <p class="text" @click="handlerDetail(data.subjectId)">
        <span class="text-a">我评论:</span
        ><span class="text-b">{{ data.content.content }}</span>
      </p>
      <div
        class="image-list"
        @click="handlerDetail(data.subjectId)"
        v-if="data.content.images"
      >
        <div class="inner" @click.stop.prevent>
          <div
            v-for="(list, index) in data.content.images"
            :key="list.userId"
            class="img"
            @click="handlerPreview(data.content.images, index)"
            :style="{
              width: 280 / data.content.images.length + 'px',
              height: 170 / data.content.images.lengtj + 'px',
              backgroundImage: 'url(' + list + ')',
            }"
          ></div>
        </div>
      </div>
      <div class="activity-card" v-if="data.content.activityId" @click="handlerCard(data.content.activity)">
        <div
          class="activity-poster"
          v-if="data.content.activityId"
          :style="{
            backgroundImage:
              'url(' +
              data.content.activity.poster +
              '?imageView2/2/w/76/h/102/format/jpg/q/60' +
              ')',
          }"
        ></div>
        <div class="activity-right">
          <div class="activity-name">
            {{ data.content.activity.properName }}
          </div>
          <div class="time-range">
            {{ data.content.activity.timeRange }}
          </div>
        </div>
      </div>
      <div class="feed-interaction border-top">
        <div class="time">{{ filters(data.content.addTime) }}</div>
        <div class="interaction-button interaction-comment">
          <i
            class="iconfont icon-comments"
            @click="handlerDetail(data.subjectId)"
          >
            <span class="num comment-icon">{{ data.content.shares }}</span>
          </i>
        </div>
        <div
          class="interaction-button interaction-support"
          @click="handlerGood"
        >
          <i class="iconfont icon-good">
            <span class="num support-num">{{ data.content.likes }}</span>
          </i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import moment from "moment";
import { ImagePreview } from "vant";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "vuex";
// import ListFoot from '../components/ListFoot.vue'

export default {
  props: ["data"],
  setup(props) {
    const store =useStore()
    const router = useRouter(),
      route = useRoute();
    function filters(data) {
      return moment(data * 1000).format("MM月DD日  HH:mm:ss");
    }
    const handlerPreview = (img, index) => {
      ImagePreview({
        images: [...img],
        closeable: true,
        startPosition: index,
      });
    };
    const handlerGood = () => {
      router.push("/login");
    };
    const handlerDetail = (id) => {
      router.push(`/login`);
    };
    const handlerCard=(data)=>{
      router.push({
        path:'/activity',
        query: {
          data:JSON.stringify(data),
        },
      })
    }
    const handleruser = (id,name) => {
      store.commit('changeUserId',id)
      store.commit('changeUserName',name)
      router.push(`/search/user/${store.state.userId}`);
    };
    return {
      filters,
      handlerPreview,
      handlerGood,
      handlerDetail,
      handleruser,
      handlerCard
    };
  },
};
</script>

<style lang="scss" scoped>
.feed-item {
  padding: 0.9375rem 0.9375rem 0.625rem 0.9375rem;
  background-color: #fff;
  .feed-head {
    display: flex;
    .head-info {
      justify-content: center;
      display: flex;
      margin-left: 0.75rem;
      height: 2.625rem;
      line-height: 2.625rem;
      color: #262626;
      font-size: 0.9375rem;
    }
    .level {
      line-height: 1.25rem;
      background-color: #fdbf38;
      height: 1.25rem;
      margin-top: 0.625rem;
      margin-left: 0.3125rem;
      border-radius: 0.625rem;
      width: 2.1875rem;
      text-align: center;
      color: white;
      font-size: 0.75rem;
    }
  }
  .feed-content {
    .text {
      line-height: 1.4;
      // margin-top: 2px;
      .text-a {
        font-size: 0.75rem;
        color: #999;
        // float: left;
      }
      .text-b {
        font-size: 15px;
        color: #262626;
      }
    }
    .image-list {
      margin: 5px 0 8px 0;
      .inner {
        margin-bottom: -4px;
        overflow: hidden;
      }
      .img {
        height: 11.25rem;
        width: 16.875rem;
        position: relative;
        float: left;
        margin-right: 4px;
        margin-bottom: 4px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }
    }
    .activity-card {
      min-height: 60px;
      background: #f3f5f5;
      padding-bottom: 5px;
      box-sizing: border-box;
      overflow: hidden;
      position: relative;
      .activity-poster {
        background-size: cover;
        background-position: center;
        // position: absolute;
        width: 38px;
        min-height: 50px;
        margin: 5px;
        float: left;
      }
      .activity-name {
        font-size: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .time-range {
        font-size: 12px;
        color: #999;
        margin-top: 5px;
      }
    }
    .feed-interaction {
      margin-top: 15px;
      overflow: hidden;
      padding-top: 10px;
      .time {
        float: left;
        color: #999;
        font-size: 12px;
        margin-top: 7px;
      }
      .interaction-button {
        float: right;
        padding: 0 0 0 11px;
        /* border: 1px solid #E6E6E6; */
        border-radius: 14px;
        margin-left: 10px;
        width: 70px;
        box-sizing: border-box;
        position: relative;
        height: 28px;
        .iconfont {
          left: 11px;
          position: absolute;
          width: 24px;
          height: 28px;
          top: 50%;
          margin-top: -10px;
          margin-right: 3px;
          color: #999999;
        }
        .num {
          color: #999999;
          font-size: 12px;
          //   display: block;
          //   margin-left: 7px;
          text-align: left;
          height: 26px;
          line-height: 26px;
        }
      }
    }
  }
}
</style>